<%@ page import="org.example.javabean.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>图书馆</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        .layui-show{
            width: 100%;
            height: 100%;
        }
        .layui-layout-body{
            background-image: url("imgs/bg4.jpg");
            filter:alpha(opacity=70); /* IE */
            -moz-opacity:0.8; /* 老版Mozilla */
            -khtml-opacity:0.8; /* 老版Safari */
            opacity: 0.8; /* 支持opacity的浏览器*/
            background-repeat:revert;
        }
        .layui-side{
            color: lightskyblue;
        }
.layui-bg-cyan{
    color: lightskyblue;
}
    </style>
</head>

<%
    User user = (User) request.getSession().getAttribute("user");
%>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header layui-bg-cyan">
        <div class="layui-logo" style="font-size: 25px;color:white">图书馆</div>
        <ul class="layui-nav layui-layout-right layui-bg-cyan">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="<%=user.getHeader()%>"
                         class="layui-nav-img">
                    <%=user.getReader()%>
                </a>
                <dl class="layui-nav-child" style="height: fit-content">
                    <dd><a href="javascript:;" name="borrow"
                           title="个人信息"
                           content="./personalInfo.jsp" id="5">个人信息
                    </a></dd>
                    <dd><a href="javascript:;" name="borrow"
                           title="系统设置"
                           content="./searchBooks.jsp" id="1">系统设置
                    </a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="index.jsp">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">借阅服务</a>
                    <dl class="layui-nav-child layui-bg-red">
                        <dd><a href="javascript:;" name="borrow" title="查询图书"
                               content="./searchBooks.jsp" id="1">查询图书</a></dd>
                        <dd><a href="javascript:;" name="borrow" title="借阅历史"
                               content="./userHistory.jsp" id="2">借阅历史</a></dd>
                        <dd><a href="javascript:;" name="borrow" title="再借图书"
                               content="./borrowBooks.jsp" id="3">再借图书</a></dd>
                        <dd><a href="javascript:;" name="borrow" title="收藏列表" content="./collection.jsp" id="4">收藏列表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">留言区</a>
                    <dl class="layui-nav-child">
                        <dd><a a href="javascript:;" name="borrow"
                               title="提交留言"
                               content="./Message.jsp" id="6">提交留言</a></dd>
                        <dd><a href="javascript:;" name="borrow"
                               title="查看留言"
                               content="./ShowMessage.jsp" id="7">查看留言</a></dd>

                    </dl>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div class="layui-tab layui-tab-brief" lay-filter="tabTemp"
             lay-allowClose="true"
             style="display: flex;flex-direction: column;height:
		     100%;margin: 0;padding: 0;">
            <ul class="layui-tab-title">

            </ul>
            <div class="layui-tab-content"
                 style="flex-grow: 1;">

            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        软件2048 邹翔
    </div>
</div>
<script src="./layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element'], function () {
        var element = layui.element;
        var $ = layui.$;
        let tabs = JSON.parse(sessionStorage.getItem("tabs"));
        console.log(tabs);
        if (tabs != null){
            for (var key of tabs) {
                console.log("li[lay-id=" + key +
                    "]");
                element.tabAdd("tabTemp", {
                    title: $("a[id=" + key +
                        "]").attr("title"),
                    content:
                        "<iframe style='height: 100%;width: 100%' src='" +
                        $("a[id=" + key +
                            "]").attr("content") + "' class='frame' frameborder='0'></iframe>",
                    id: $("a[id=" + key +
                        "]").attr("id")
                });
            }
        }

        $("[name=borrow]").click(function () {
            //获取当前项的id和content
            var id = $(this).attr("id");
            var content = $(this).attr("content");

            //判断标签是否存在
            if ($("li[lay-id=" + id + "]").length == 0) {
                if (tabs == null){
                    tabs = new Array();
                }
                tabs.push(id);
                sessionStorage.setItem("tabs", JSON.stringify(tabs));
                //添加新标签
                element.tabAdd("tabTemp", {
                    title: $(this).attr("title"),
                    content:
                        "<iframe style='height: 100%;width: 100%' src='" +
                        content + "' class='frame' frameborder='0'></iframe>",
                    id: id
                });
            }
            //切换标签
            element.tabChange("tabTemp", id);
        });
        element.on('tabDelete(tabTemp)', function(data){
            console.log("索引：");
            console.log(data.index);
            tabs.splice(data.index, 1);
            console.log("删除后："+tabs);
            sessionStorage.setItem("tabs", JSON.stringify(tabs));
        });
    });
</script>
</body>
</html>
